<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《神医灵妃》角色匹配答题</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#A67C52',      // 更明亮的古风棕色
                        secondary: '#D2B48C',    // 暖棕色
                        accent: '#E8A87C',       // 更明亮的古风红色
                        dark: '#2D2A24',         // 深色背景（稍亮）
                        light: '#F5F5DC',        // 浅色文本
                    },
                    fontFamily: {
                        ancient: ['"Ma Shan Zheng"', '"Noto Serif SC"', 'serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .door-transition {
                transition: transform 1.5s cubic-bezier(0.645, 0.045, 0.355, 1);
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 减少阴影浓度 */
            }
            .bg-blur {
                backdrop-filter: blur(5px);
            }
            .page-transition {
                transition: opacity 0.5s ease-in-out;
            }
            .title-glow {
                animation: glow 2s ease-in-out infinite alternate;
            }
            @keyframes glow {
                from {
                    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #E8A87C, 0 0 20px #E8A87C;
                }
                to {
                    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #E8A87C, 0 0 40px #E8A87C;
                }
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="bg-dark text-light min-h-screen overflow-x-hidden">
<!-- 第一页：门效果 -->
<div id="page1" class="relative h-screen w-screen overflow-hidden">
    <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://tc.z.wiki/autoupload/f/SruQaEf9wGr5laFp80x0XC1lykswKC7CABZlhSwbeyCyl5f0KlZfm6UsKj-HyTuv/20250718/73SJ/800X1200/imgdiet/%E8%83%8C%E6%99%AF%E5%9B%BE.jpg'); filter: brightness(0.6);"></div> <!-- 主背景图 -->

    <!-- 左门 -->
    <div id="left-door" class="door-transition absolute top-0 left-0 h-full w-1/2 bg-cover bg-right" style="background-image: url('https://tc.z.wiki/autoupload/f/SruQaEf9wGr5laFp80x0XC1lykswKC7CABZlhSwbeyCyl5f0KlZfm6UsKj-HyTuv/20250718/Encv/400X1200/imgdiet/%E5%BC%80%E9%97%A8%E5%9B%BE%E5%B7%A6.jpg'); transform-origin: left center;"></div> <!-- 左侧门图 -->

    <!-- 右门 -->
    <div id="right-door" class="door-transition absolute top-0 right-0 h-full w-1/2 bg-cover bg-left" style="background-image: url('https://tc.z.wiki/autoupload/f/SruQaEf9wGr5laFp80x0XC1lykswKC7CABZlhSwbeyCyl5f0KlZfm6UsKj-HyTuv/20250718/V6u1/400X1200/imgdiet/%E5%BC%80%E9%97%A8%E5%9B%BE%E5%8F%B3.jpg'); transform-origin: right center;"></div> <!-- 右侧门图 -->

    <!-- 门中间的标题 -->
    <div class="absolute inset-0 flex items-center justify-center z-10">
        <h1 class="font-ancient text-[clamp(2rem,5vw,4rem)] text-light text-shadow tracking-wider title-glow">
            神医灵妃
        </h1>
    </div>

    <!-- 点击提示 -->
    <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-light text-shadow text-center">
        <p class="font-ancient text-xl">点击开启测试</p>
        <i class="fa fa-hand-o-down mt-2 animate-bounce"></i>
    </div>
</div>

<!-- 第二页：介绍页面 -->
<div id="page2" class="min-h-screen hidden">
    <div class="fixed inset-0 bg-cover bg-center" style="background-image: url('https://tc.z.wiki/autoupload/f/SruQaEf9wGr5laFp80x0XC1lykswKC7CABZlhSwbeyCyl5f0KlZfm6UsKj-HyTuv/20250718/73SJ/800X1200/imgdiet/%E8%83%8C%E6%99%AF%E5%9B%BE.jpg'); filter: brightness(0.6); z-index: -1;"></div> <!-- 主背景图 -->

    <!-- 开头内容 -->
    <div class="container mx-auto px-4 py-8">
        <div class="bg-dark/50 bg-blur p-6 rounded-lg mb-8 border border-light/30"> <!-- 调整透明度 -->
            <p class="font-ancient text-[clamp(1rem,2vw,1.25rem)] leading-relaxed">
                在九幽城迷雾重重的诡案中，慕惊语用灵眸洞穿生死真相，墨行桉挥执扇推演挥出破案谋略迷局乾坤，谢知尘以丹青勾勒线索，墨行砚从纨绔蜕变为担当少年，施慎君凭威严执掌大局。……
                你是否好奇，若置身这波谲云诡的世界，会成为哪位搅动风云的人物？是手握验尸秘术的灵妃，还是智计无双的世子？快来解锁你在《神医灵妃》中的专属身份！
            </p>
        </div>

        <!-- 开始按钮 -->
        <div class="text-center mt-10 mb-16">
            <button id="start-quiz" class="font-ancient bg-accent hover:bg-accent/80 text-light py-3 px-8 rounded-full text-xl transform transition hover:scale-105">
                开始测试
            </button>
        </div>
    </div>
</div>

<!-- 题目页面容器 -->
<div id="questions-container" class="min-h-screen hidden">
    <div class="fixed inset-0 bg-cover bg-center" style="background-image: url('https://tc.z.wiki/autoupload/f/SruQaEf9wGr5laFp80x0XC1lykswKC7CABZlhSwbeyCyl5f0KlZfm6UsKj-HyTuv/20250718/73SJ/800X1200/imgdiet/%E8%83%8C%E6%99%AF%E5%9B%BE.jpg'); filter: brightness(0.5); z-index: -1;"></div> <!-- 第二张图片作为题目背景 -->

    <!-- 进度指示器 -->
    <div class="container mx-auto px-4 py-4 flex justify-center">
        <div id="progress-indicator" class="flex space-x-2">
            <!-- 动态生成进度点 -->
        </div>
    </div>

    <!-- 题目将通过JS动态生成 -->
</div>

<!-- 提交页 -->
<div id="submit-page" class="min-h-screen hidden">
    <div class="fixed inset-0 bg-cover bg-center" style="background-image: url('https://tc.z.wiki/autoupload/f/SruQaEf9wGr5laFp80x0XC1lykswKC7CABZlhSwbeyCyl5f0KlZfm6UsKj-HyTuv/20250718/73SJ/800X1200/imgdiet/%E8%83%8C%E6%99%AF%E5%9B%BE.jpg'); filter: brightness(0.5); z-index: -1;"></div> <!-- 第三张图片作为提交页背景 -->

    <div class="container mx-auto px-4 py-8">
        <div class="bg-dark/50 bg-blur p-6 rounded-lg mb-8 border border-light/30 text-center"> <!-- 调整透明度 -->
            <p class="font-ancient text-[clamp(1.5rem,3vw,2rem)] mb-6">你已完成所有问题！</p>
            <p class="font-ancient text-[clamp(1rem,2vw,1.25rem)] mb-8">准备好揭晓你在《神医灵妃》中的角色了吗？</p>

            <!-- 提交按钮 -->
            <button id="submit-answers-final" class="font-ancient bg-accent hover:bg-accent/80 text-light py-3 px-8 rounded-full text-xl transform transition hover:scale-105">
                查看结果
            </button>
        </div>
    </div>
</div>

<!-- 第三页：结果弹窗 -->
<div id="result-modal" class="fixed inset-0 bg-black/70 z-50 hidden items-center justify-center p-4"> <!-- 调整透明度 -->
    <div class="bg-dark border-2 border-accent rounded-lg max-w-lg w-full p-6 transform transition-all">
        <h2 id="result-title" class="font-ancient text-[clamp(1.5rem,3vw,2rem)] text-center mb-4 text-accent"></h2>
        <div id="result-description" class="font-ancient text-[clamp(1rem,2vw,1.25rem)] leading-relaxed mb-6"></div>

        <!-- 结尾链接 -->
        <div class="text-center">
            <a href="https://weread.qq.com/web/reader/f7132ae0813aba23dg017094" target="_blank" class="inline-block font-ancient text-accent hover:text-accent/80 transition text-lg underline">
                想知道这些鲜活角色在九幽城还会掀起怎样的波澜？点击前往微信读书，沉浸式解锁《神医灵妃》的更多精彩！
            </a>
        </div>

        <!-- 重新测试按钮 -->
        <div class="text-center mt-6">
            <button id="restart-btn" class="bg-transparent border border-accent text-accent hover:bg-accent hover:text-light py-2 px-6 rounded-full transition">
                重新测试
            </button>
        </div>
    </div>
</div>

<!-- 自定义提示框 -->
<div id="custom-alert" class="fixed top-4 left-1/2 transform -translate-x-1/2 bg-accent text-light px-6 py-3 rounded-full shadow-lg z-50  opacity-0 transition-opacity duration-200 pointer-events-none">
    <p id="alert-message" class="font-ancient">请选择一个选项</p>
</div>

<script>
    // 存储用户选择的答案
    const userAnswers = {}; 

    // DOM 元素
    const page1 = document.getElementById('page1');
    const page2 = document.getElementById('page2');
    const questionsContainer = document.getElementById('questions-container');
    const submitPage = document.getElementById('submit-page');
    const leftDoor = document.getElementById('left-door');
    const rightDoor = document.getElementById('right-door');
    const resultModal = document.getElementById('result-modal');
    const submitAnswersBtn = document.getElementById('submit-answers-final');
    const restartBtn = document.getElementById('restart-btn');
    const startQuizBtn = document.getElementById('start-quiz');
    const progressIndicator = document.getElementById('progress-indicator');
    const customAlert = document.getElementById('custom-alert');
    const alertMessage = document.getElementById('alert-message');

    // 题目数据
    const questions = [
        {
            id: 0,
            title: "1. 你的性格特点更偏向：",
            options: [
                { char: 'A', text: '灵动狡黠，又清冷疏离' },
                { char: 'B', text: '玩世不恭但心思深沉' },
                { char: 'C', text: '温和儒雅，有自己的原则' },
                { char: 'D', text: '纨绔但善良，胆小又机灵' },
                { char: 'E', text: '毒舌傲娇，实则内心柔软' }
            ]
        },
        {
            id: 1,
            title: "2. 团队合作中，你通常扮演的角色是：",
            options: [
                { char: 'A', text: '寻找关键线索的核心成员' },
                { char: 'B', text: '制定策略的领导者' },
                { char: 'C', text: '辅助分析细节的智者' },
                { char: 'D', text: '带来欢乐和偶尔提供意外思路的角色' },
                { char: 'E', text: '提供后勤保障和资源支持的角色' }
            ]
        },
        {
            id: 2,
            title: "3. 面对危险，你会：",
            options: [
                { char: 'A', text: '冷静分析，利用自身能力化解' },
                { char: 'B', text: '挺身而出，保护身边的人' },
                { char: 'C', text: '沉着应对，协助制定解决方案' },
                { char: 'D', text: '虽然害怕但还是会努力克服' },
                { char: 'E', text: '指挥安排，保障大家安全' }
            ]
        },
        {
            id: 3,
            title: "4. 当你遇到棘手案件时，你会：",
            options: [
                { char: 'A', text: '凭借专业知识和细致观察寻找线索' },
                { char: 'B', text: '运用智慧和谋略，制定周密计划' },
                { char: 'C', text: '耐心分析细节，抽丝剥茧' },
                { char: 'D', text: '迅速调配资源，精准部署人力' },
                { char: 'E', text: '虽然害怕但还是壮着胆子跟着大家' }
            ]
        },
        {
            id: 4,
            title: "5. 面对感情，你会：",
            options: [
                { char: 'A', text: '被对方的能力和独特魅力吸引，在相处中逐渐深入' },
                { char: 'B', text: '从好奇到被打动，慢慢付出真心' },
                { char: 'C', text: '默默守护，关键时刻给予支持' },
                { char: 'D', text: '直白表达喜欢，热情追求' },
                { char: 'E', text: '刀子嘴豆腐心，暗暗关怀' }
            ]
        }
    ];
   const totalQuestions = 5;

    // 生成进度指示器
    function generateProgressIndicator() {
        progressIndicator.innerHTML = '';
        for (let i = 0; i < totalQuestions; i++) {
            const dot = document.createElement('div');
            dot.id = `progress-${i}`;
            dot.className = `w-3 h-3 rounded-full bg-light/30 transition-all`;
            progressIndicator.appendChild(dot);
        }
    }

    // 更新进度指示器
    function updateProgressIndicator(currentQuestion) {
        for (let i = 0; i < totalQuestions; i++) {
            const dot = document.getElementById(`progress-${i}`);
            if (i < currentQuestion) {
                dot.className = 'w-3 h-3 rounded-full bg-accent';
            } else if (i === currentQuestion) {
                dot.className = 'w-3 h-3 rounded-full bg-light';
            } else {
                dot.className = 'w-3 h-3 rounded-full bg-light/30';
            }
        }
    }

    // 生成题目页面
    function generateQuestionPage(question) {
        const page = document.createElement('div');
        page.id = `question-${question.id}`;
        page.className = 'question-page container mx-auto px-4 py-8 hidden page-transition';

        const content = `
                <div class="bg-dark/50 bg-blur p-6 rounded-lg border border-light/30"> <!-- 调整透明度 -->
                    <p class="font-ancient text-[clamp(1.2rem,3vw,1.5rem)] mb-6">${question.title}</p>
                    <div class="question-options space-y-3">
                        ${question.options.map(option => `
                            <div class="question-option p-3 border border-light/30 rounded hover:bg-accent/30 cursor-pointer transition" data-char="${option.char}">
                                <span class="font-bold mr-2">${option.char}.</span>${option.text}
                            </div>
                        `).join('')}
                    </div>
                </div>

                <div class="flex justify-between mt-8">
                    ${question.id > 0 ? `<button class="prev-btn font-ancient bg-transparent border border-light/30 text-light hover:bg-light/10 py-2 px-6 rounded-full transition">上一题</button>` : `<div class="w-24"></div>`}
                    ${question.id < totalQuestions - 1 ? `<button class="next-btn font-ancient bg-accent hover:bg-accent/80 text-light py-2 px-6 rounded-full transition">下一题</button>` : `<button class="next-btn font-ancient bg-accent hover:bg-accent/80 text-light py-2 px-6 rounded-full transition">完成</button>`}
                </div>
            `;

        page.innerHTML = content;
        questionsContainer.appendChild(page);

        // 添加选项点击事件
        const options = page.querySelectorAll('.question-option');
        options.forEach(option => {
            option.addEventListener('click', function() {
                // 清除同一题目的其他选项选中状态
                options.forEach(sib => sib.classList.remove('bg-accent/50', 'border-accent'));

                // 设置当前选项为选中状态
                this.classList.add('bg-accent/50', 'border-accent');

                // 记录答案
                userAnswers[question.id] = this.getAttribute('data-char');
            });
        });

        // 添加下一题按钮事件
        const nextBtn = page.querySelector('.next-btn');
        nextBtn.addEventListener('click', () => {
            // 如果用户没有选择答案，给出提示
            if (!userAnswers[question.id]) {
                showCustomAlert('请选择一个选项');
                return;
            }

            // 隐藏当前页面
            page.classList.add('hidden');

            // 如果不是最后一题，显示下一题
            if (question.id < totalQuestions - 1) {
                const nextPage = document.getElementById(`question-${question.id + 1}`);
                nextPage.classList.remove('hidden');
                updateProgressIndicator(question.id + 1);
            } else {
                // 如果是最后一题，显示提交页
                questionsContainer.style.display = 'none';
                submitPage.classList.remove('hidden');
            }
        });

        // 添加返回按钮事件
        if (question.id > 0) {
            const prevBtn = page.querySelector('.prev-btn');
            prevBtn.addEventListener('click', () => {
                // 隐藏当前页面
                page.classList.add('hidden');

                // 显示上一题
                const prevPage = document.getElementById(`question-${question.id - 1}`);
                prevPage.classList.remove('hidden');
                updateProgressIndicator(question.id - 1);
            });
        }
    }

    // 第一页开门效果
    page1.addEventListener('click', () => {
        leftDoor.style.transform = 'rotateY(-90deg)';
        rightDoor.style.transform = 'rotateY(90deg)';

        // 门打开后显示第二页
        setTimeout(() => {
            page1.style.display = 'none';
            page2.style.display = 'block';
        }, 1500);
    });

    // 开始测试按钮点击事件
    startQuizBtn.addEventListener('click', () => {
        // 隐藏介绍页
        page2.style.display = 'none';

        // 显示题目容器
        questionsContainer.style.display = 'block';

        // 生成进度指示器
        generateProgressIndicator();

        // 生成所有题目页面
        questions.forEach(question => {
            generateQuestionPage(question);
        });

        // 显示第一题
        const firstQuestion = document.getElementById('question-0');
        firstQuestion.classList.remove('hidden');

        // 更新进度指示器
        updateProgressIndicator(0);
    });

    // 提交答案按钮点击事件
    submitAnswersBtn.addEventListener('click', () => {
        // 统计答案
        const counts = {
            'A': 0,
            'B': 0,
            'C': 0,
            'D': 0,
            'E': 0
        };

        // 统计前7题
        for (let i = 0; i < totalQuestions; i++) {
            const char = userAnswers[i];
            if (char) counts[char]++;
        }

        // 检查是否每个选项都只选了一次
        const allOnce = Object.values(counts).every(count => count === 1);

        // 确定结果角色
        let resultChar;
        if (allOnce) {
            resultChar = 'A'; // 自动选为主角慕惊语
        } else {
            // 找到次数最多的选项
            let maxCount = 0;
            resultChar = 'A'; // 默认值

            for (const char in counts) {
                if (counts[char] > maxCount) {
                    maxCount = counts[char];
                    resultChar = char;
                }
            }
        }

        // 显示结果
        showResult(resultChar);
    });

    // 自定义提示框
    function showCustomAlert(message){
        alertMessage.textContent = message;
        customAlert.classList.remove('opacity-0', 'pointer-events-none');

        // 3秒后自动隐藏
        setTimeout(() => {
            customAlert.classList.add('opacity-0', 'pointer-events-none');
        }, 3000);
    }

    // 显示结果
    function showResult(char) {
        const resultTitle = document.getElementById('result-title');
        const resultDescription = document.getElementById('result-description');

        // 根据角色设置结果内容
        switch(char) {
            case 'A':
                resultTitle.textContent = '慕惊语';
                resultDescription.innerHTML = '恭喜你，你是洞察生死的神医灵灵眸医妃！那双能看穿未来与过往的眼睛，藏着无数未解之谜。在迷雾重重的诡案中，你用医术与智慧拨开阴霾，清冷外表下跳动着炽热的正义之心，在探寻真相的路上，邂逅命中注定的情缘。';
                break;
            case 'B':
                resultTitle.textContent = '墨行桉';
                resultDescription.innerHTML = '你便是折扇藏锋的玄察司卿！剑眉星目间流转着过人的智谋，看似玩世不恭，实则心怀天下。一柄折扇既是武器也是谋略，断案时尽显智勇双全，在与心爱之人并肩作战中，逐渐敞开尘封的心扉。';
                break;
            case 'C':
                resultTitle.textContent = '谢知尘';
                resultDescription.innerHTML = '你是温润如玉的刑侦画师！身形清瘦如竹，眉眼含笑似能融化冰霜。饱读诗书的你，用细腻的心思和手中画笔，为破解诡案提供关键线索。温和外表下自有棱角，在朝堂与探案中，走出属于自己的精彩之路。';
                break;
            case 'D':
                resultTitle.textContent = '墨行砚';
                resultDescription.innerHTML = '恭喜解锁财迷纨绔小王爷身份！金玉其外，可爱藏于内。虽曾是纨绔子弟，却在一次次诡案中蜕变成长。你嘴甜心软，是团队里的开心果，也是不可或缺的破案吉祥物，在追逐真相的过程中，找到属于自己的担当。';
                break;
            case 'E':
                resultTitle.textContent = '施慎君';
                resultDescription.innerHTML = '你是执掌中馈的国公夫人！一袭绿衣尽显威严，毒舌傲娇是你的保护色，内心却柔软似春水。以雷霆手段治家，用细腻情感守护家人，在大宅后院的风云中，书写着属于自己的传奇。';
                break;
        }

        // 显示结果弹窗
        resultModal.style.display = 'flex';
    }

    // 重新测试按钮点击事件
    restartBtn.addEventListener('click', () => {
        // 重置答案
        Object.keys(userAnswers).forEach(key => delete userAnswers[key]);

        // 隐藏结果弹窗
        resultModal.style.display = 'none';

        // 隐藏题目容器和提交页
        questionsContainer.style.display = 'none';
        submitPage.classList.add('hidden');

        // 清空题目容器
        questionsContainer.innerHTML = '';

        // 显示介绍页
        page2.style.display = 'block';
    });
</script>
</body>
</html>
    